<template>
    <li class="animated fadeIn" data-id="Boxofmacaroons1999_1">
        <input type="hidden" :value="product.id"/>
        <span class="ct-cart-name">{{product.name}}</span>
        <span class="ct-cart-price">{{currency(product.price)}}</span>
        <input type="number" min="1" :value="count" @change="update" class="ct-cart-input">
        <button class="ct-cart-remove" @click="removeFromCart(product)">×</button>
    </li>
</template>

<script>
    import format from '@cart/js/currency.js'
    import {mapState, mapGetters,mapMutations, mapActions} from 'vuex'
export default {
    data: function () {
        return {
        }
    },
    computed:{
      internalCount: {
          get: function () {
              return this.count
          },
          set: function (count) {
              count = Number.parseInt(count)
              let payload = {product: this.product, count: Number.isNaN(count) ? 1 : count, oldcount: this.count}
              this.updateProductCount(payload)
             // this.$forceUpdate()   //由于上述操作未必成功，因此强制重新刷新组件
          }
      }
    },
    watch:{
    },
    props: {
        product: {
          type: Object
        },
        count: {
            required: true,
            type: Number,
            validator: function (value) {
                return value >= 1
            }
        }
    },
    methods: {
        currency: format,
        ...mapActions(['removeFromCart','updateProductCount']),
        update: function (event) {
            let count = Number.parseInt(event.target.value)
            let payload = {product: this.product, count: Number.isNaN(count) ? 1 : count, oldcount: this.count}
            this.updateProductCount(payload)
            this.$forceUpdate()   //由于上述操作未必成功，因此强制重新刷新组件
        }
    }
}
</script>

<style>
</style>
